{{#section 'style'}}<link rel="stylesheet" href="/style/center.css">{{/section}}

<div class="techbook userCenter">
    <!--head-->
    {{> header_center}}
    <!--head End-->

    <!--body-->
    <div class="body">
        <div class="wrap">

            {{> ucenter_side}}

            <div class="det fr">
                <div class="userBox bgWhite fl">
                    <dl class="userInfo fl">
                        <dt class="fl">
                        <div class="imgBox"><div class="img"><a href=""><img src="/img/example/user_150x150.jpg" alt=""/><span>编辑</span></a></div></div>
                        </dt>
                        <dd>
                            <div class="name"><b>feng****@126.com</b><div>VIP1</div></div>
                            <div class="zl">
                                <a href="" class="fr">立即完善</a>
                                <span>资料完整度：</span>
                                <div class="zd">
                                    <p style="width:10%;">10%</p>
                                </div>
                            </div>
                            <div class="safe">
                                <a href="">立即提升</a>
                                <span>帐户安全级别：</span>
                                <i class="lv hl">低</i>
                                <i class="phone"></i>
                                <i class="email"></i>
                                <!--3 个 i 标签 加上 “hl” 类名即为高亮样式-->
                            </div>
                        </dd>
                    </dl>

                    <div class="wait fr">
                        <a href="">
                            <img src="/img/bg/userInfo_wait_01.gif" alt=""/>
                            <p>待收款<b>0</b></p>
                        </a>
                        <a href="">
                            <img src="/img/bg/userInfo_wait_02.gif" alt=""/>
                            <p>侍收货<b>0</b></p>
                        </a>
                        <a href="">
                            <img src="/img/bg/userInfo_wait_03.gif" alt=""/>
                            <p>待评论<b>0</b></p>
                        </a>
                    </div>
                </div>

                <dl class="userAnnouncement bgWhite fr">
                    <dt>会员公告</dt>
                    <dd><a href="">[特惠]特惠特惠特惠特惠END</a></dd>
                    <dd><a href="">[特惠]特惠特惠特惠特惠END</a></dd>
                    <dd><a href="">[特惠]特惠特惠特惠特惠END</a></dd>
                    <dd><a href="">[特惠]特惠特惠特惠特惠END</a></dd>
                </dl>
                <div class="cb" style="height: 15px;"></div>

                <dl class="userCenterLayout ">
                    <dt><i class="fl"></i><b>我的订单</b><a href="" class="fr">查看全部订单</a></dt>
                    <dd>
                        <ul class="myOrderList">
                            <li>
                                <ul class="list">
                                    <li>
                                        <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                    </li>
                                    <li>
                                        <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                    </li>
                                    <li>
                                        <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                    </li>
                                </ul>
                                <ul class="dot">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <p class="name">王小丫</p>
                                <div class="total">
                                    <p>￥114.00</p>
                                    <p>在线支付</p>
                                </div>
                                <div class="time">2016-03-20 23:32:55</div>
                                <div class="status">
                                    <h4>等待付款</h4>
                                    <dl class="userLogistics">
                                        <dt><span>跟踪</span></dt>
                                        <dd>
                                            <i class="arrow"></i>
                                            <div class="con">
                                                <div class="title"><i class="closeBtn">&times;</i>物流配送</div>
                                                <ul>
                                                    <li>
                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                    </li>
                                                    <li>
                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                    </li>
                                                    <li>
                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                    </li>
                                                </ul>
                                                <p class="all"><a href="">查看全部物流 &gt;</a></p>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                                <a href="" class="view">查看</a>
                            </li>
                            <li>
                                <ul class="list">
                                    <li>
                                        <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                    </li>
                                    <li>
                                        <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                    </li>
                                    <li>
                                        <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                    </li>
                                </ul>
                                <ul class="dot">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <p class="name">王小丫</p>
                                <div class="total">
                                    <p>￥114.00</p>
                                    <p>在线支付</p>
                                </div>
                                <div class="time">2016-03-20 23:32:55</div>
                                <div class="status">
                                    <h4>等待付款</h4>
                                    <dl class="userLogistics">
                                        <dt><span>跟踪</span></dt>
                                        <dd>

                                            <i class="arrow"></i>
                                            <div class="con">
                                                <div class="title"><i class="closeBtn">&times;</i>物流配送</div>
                                                <ul>
                                                    <li>
                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                    </li>
                                                    <li>
                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                    </li>
                                                    <li>
                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                    </li>
                                                </ul>
                                                <p class="all"><a href="">查看全部物流 &gt;</a></p>
                                            </div>

                                        </dd>
                                    </dl>
                                </div>
                                <a href="" class="view">查看</a>
                            </li>
                            <li>
                                <ul class="list">
                                    <li>
                                        <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                    </li>
                                    <li>
                                        <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                    </li>
                                    <li>
                                        <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                    </li>
                                </ul>
                                <ul class="dot">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <p class="name">王小丫</p>
                                <div class="total">
                                    <p>￥114.00</p>
                                    <p>在线支付</p>
                                </div>
                                <div class="time">2016-03-20 23:32:55</div>
                                <div class="status">
                                    <h4>等待付款</h4>
                                    <dl class="userLogistics">
                                        <dt><span>跟踪</span></dt>
                                        <dd>

                                            <i class="arrow"></i>
                                            <div class="con">
                                                <div class="title"><i class="closeBtn">&times;</i>物流配送</div>
                                                <ul>
                                                    <li>
                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                    </li>
                                                    <li>
                                                        <p>2016-04-17 19:52:16</p>
                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                    </li>
                                                    <li>
                                                        <p>2016-04-17 19:52:16</p>
                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                    </li>
                                                </ul>
                                                <p class="all"><a href="">查看全部物流 &gt;</a></p>
                                            </div>

                                        </dd>
                                    </dl>
                                </div>
                                <a href="" class="view">查看</a>
                            </li>
                        </ul>
                    </dd>
                </dl>

                <dl class="userCenterLayout">
                    <dt><i class="fl"></i><b>关注的商品</b><a href="" class="fr">查看更多</a></dt>
                    <dd>
                        <div class="userCenterConcerned" id="userCenterConcerned">
                            <span class="prev"></span>
                            <div class="list">
                                <ul>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥11.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥12.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥13.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥14.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥15.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥16.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥17.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥18.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥19.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥20.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥21.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥22.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥23.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥24.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥25.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥26.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥27.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥28.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥29.00</h3>
                                    </li>
                                    <li>
                                        <div class="imgBox">
                                            <div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div>
                                        </div>
                                        <h3>￥30.00</h3>
                                    </li>
                                </ul>
                            </div>
                            <span class="next"></span>
                        </div>
                    </dd>
                </dl>

                <dl class="userCenterLayout">
                    <dt><i class="fl"></i><b>关注的商品</b><a href="" class="fr">查看更多</a></dt>
                    <dd>
                        <ul class="userCenterHistory">
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                            <li><div class="img"><a href=""><img src="/img/example/book_99x99.jpg" alt=""/></a></div></li>
                        </ul>
                        <div class="cb"></div>
                    </dd>
                </dl>
            </div>

            <div class="cb"></div>

        </div>
    </div>
    <!--body End-->

    <!--foot-->
    {{>footer}}
    <!--foot End-->

    <!--sideBar-->

    <!--sideBar End-->

</div>

{{#section 'script'}}
<script>
    $(function(){
        //Tab
        $('.tab').tab();

        $('#userCenterConcerned').scroll();

        //跟踪列表
        ;(function(){
            var $list=$('.userLogistics');
            //切换
            $list.on('mouseenter','dt>span',function () {
                var $dl=$(this).closest('dl');
                if($dl.hasClass('open'))return;
                $dl.addClass('open');
            });
            //关闭
            $list.on('mouseleave', function () {
                $(this).removeClass('open');
            });
            $list.on('click','.closeBtn', function () {
                $(this).closest('dl').removeClass('open');
            });
        })();
    });
</script>
{{/section}}